<!--  -->
<template>
   <div class='html_box'>
      <div><el-button type="success" @click="clickOpenAdd">新增</el-button></div>
      <div class="list" v-for="(item,index) in jsList" :key="item.id" :index="index">
         <div class="title">  {{ index+ 1 }}.{{ item.title }}
            <el-button type="primary" plain @click="clickSee(index)">查看答案</el-button>
            <el-button type="primary" plain @click="clickDelete(item.id)">删除</el-button>
         </div>

         <div  :class="[isShow == index ? 'showBlock' : 'noBlock']">
            <div class="answer" v-for="(item2,index2) in item.problem" :key="item2.answer" :index="index2">
               <div>&ensp;&ensp;&ensp;&ensp;{{item2.answer}}</div>
            </div>
         </div>
      </div>

      <el-dialog
         title="新增面试题"
         :visible.sync="dialogVisible"
         width="30%"
         :before-close="handleClose">
         <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
            <el-form-item label="问题：">
               <el-input v-model="sizeForm.title"></el-input>
            </el-form-item>
            <el-form-item :label="index == 0 ? '答案：' : ''" v-for="(item,index) in sizeForm.problem" :key="index" :index="index">
               <el-input v-model="item.answer"></el-input>
            </el-form-item>
            <el-form-item label="">
               <el-button type="primary" @click="clickAddList">添加答案列表</el-button>
            </el-form-item>
         </el-form>
         <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="clickSubmit">确 定</el-button>
         </span>
      </el-dialog>
   </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {deleteJsList,postJsList,getJsList} from '../request/api'
// import {postCssList,getCssList,deleteCssList} from '../request/api'
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
   jsList:[],
   look:false,
   isShow:'yys',
   dialogVisible: false,
   sizeForm:{
      title:'',
      problem:[
         {answer:''},
         {answer:''},
      ]
   }


};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
   getList(){
      getJsList().then(res => {
         this.jsList = res
      })
   },
   clickSee(e) {
      console.log(e,"0099");
      this.isShow = e
   },
   clickDelete(e){
      console.log(e,"ppp");
      deleteJsList(e).then(res=>{
         console.log(res);
         location.reload();//刷新
      })

   },
   clickOpenAdd() {
      this.dialogVisible = true
      this.sizeForm = {
         title:'',
         problem:[
            {answer:''},
            {answer:''},
         ]
      }
   },
   handleClose(done) {
      console.log(done,"6789");
      this.$confirm('确认关闭？')
         .then(_ => {
            done();
         })
         .catch(_ => {});
      },
      clickAddList(){
         this.sizeForm.problem.push({answer:''})
      },
      clickSubmit(){
         this.dialogVisible = false
         let data = this.sizeForm
         postJsList(data).then(res=>{
            console.log(res,"234");
            // location.reload();//刷新
            this.$router.go(0)
         })
      }

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
   this.getList()

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>

.showBlock{
   display: block;
}
.noBlock{
   display: none;
}
.html_box{
   .list{
      .title{
         padding: 10px;
         font-size: 24px;
      }
      .answer{
         padding: 10px;
         font-size: 18px;
      }
   }

}

</style>